import React from 'react';
import { Card, Modal, Button, message } from 'antd';
import PropTypes from 'prop-types';
import DescriptionList from '../../components/DescriptionList';
import { getDicByKey } from '@/support/common';
import ReplaceRecordModal from './replaceRecordModal';
import VersionHistoryModal from './VersionHistoryModal';
const { Description } = DescriptionList;
class ipdaDetailModal extends React.PureComponent {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.array,
  };
  state = {
    replaceRecordLoading: false,
    replaceRecordVisible: false,
    replaceRecord: [],
    versionHistoryLoading: false,
    versionHistoryVisible: false,
    versionHistory: [],
  };

  handleReplaceRecord = vin => {
    const { dispatch } = this.props;
    this.setState({ replaceRecordVisible: true, replaceRecordLoading: true });
    dispatch({
      type: 'extendForm/fetch',
      payload: { url: '/vehicle/replacerecord', vin },
      callback: data => {
        if (data.statusCode === '0') {
          const replaceRecord = data.data != null && data.data.length > 0 ? data.data : [];
          this.setState({ replaceRecord, replaceRecordLoading: false });
        } else {
          this.setState({ replaceRecord: [], replaceRecordLoading: false });
          message.error(data.statusMessage);
        }
      },
    });
  };

  handleCloseReplaceRecordModal = () => {
    this.setState({ replaceRecordVisible: false });
  };

  handleVersionHistory = deviceId => {
    const { dispatch } = this.props;
    this.setState({ versionHistoryVisible: true, versionHistoryLoading: true });
    dispatch({
      type: 'extendForm/fetch',
      payload: { url: '/vehicle/versionhistory', deviceId },
      callback: data => {
        if (data.statusCode === '0') {
          const versionHistory = data.data != null && data.data.length > 0 ? data.data : [];
          this.setState({ versionHistory, versionHistoryLoading: false });
        } else {
          this.setState({ versionHistory: [], versionHistoryLoading: false });
          message.error(data.statusMessage);
        }
      },
    });
  };

  handleCloseVersionHistoryModal = () => {
    this.setState({ versionHistoryVisible: false });
  };

  render() {
    const {
      replaceRecordVisible,
      replaceRecordLoading,
      replaceRecord,
      versionHistoryLoading,
      versionHistoryVisible,
      versionHistory,
    } = this.state;
    const { changeVisible, detailModelData } = this.props;
    const hasReplaceRecord = false; // this.context.authButton.includes('vehicleSearch-replaceRecord');
    const hasVersionHistory = false; // this.context.authButton.includes('vehicleSearch-versionHistory');
    return (
      <Modal
        title="详细信息"
        style={{ top: 20 }}
        width="700px"
        visible={this.props.visible}
        onCancel={() => changeVisible()}
        footer={[
          <Button key="back" type="primary" size="small" onClick={() => changeVisible()}>
            返回
          </Button>,
        ]}
      >
        <div>
          <Card bordered={false} size="small" type="inner">
            <DescriptionList title="" col={2}>
              <Description term="车机编号" style={{ width: '50%' }}>
                {hasReplaceRecord ? (
                  <a onClick={() => this.handleReplaceRecord(detailModelData.vin)}>
                    {detailModelData.deviceId}
                  </a>
                ) : (
                  detailModelData.deviceId
                )}
              </Description>
              <Description term="设备名称" style={{ width: '50%' }}>
                {detailModelData.deviceName}
              </Description>
              <Description term="硬件版本号" style={{ width: '100%' }}>
                {detailModelData.versionHardware}
              </Description>
              <Description term="软件版本号" style={{ width: '100%' }}>
                {hasVersionHistory ? (
                  <a onClick={() => this.handleVersionHistory(detailModelData.deviceId)}>
                    {detailModelData.versionSoftware}
                  </a>
                ) : (
                  detailModelData.versionSoftware
                )}
              </Description>
              <Description term="批次号" style={{ width: '50%' }}>
                {detailModelData.batchNo}
              </Description>
              <Description term="设备状态" style={{ width: '50%' }}>
                {getDicByKey(
                  this.context.dicData,
                  'deviceStatus',
                  detailModelData.deviceStatus || detailModelData.deviceStatus === 0
                    ? detailModelData.deviceStatus.toString()
                    : detailModelData.deviceStatus,
                )}
              </Description>
              <Description term="激活时间" style={{ width: '50%' }}>
                {detailModelData.enrollDate}
              </Description>
              <Description term="生产日期" style={{ width: '50%' }}>
                {detailModelData.produceDate}
              </Description>
              <Description term="发布日期" style={{ width: '50%' }}>
                {detailModelData.publishDate}
              </Description>
              <Description term="入库时间" style={{ width: '50%' }}>
                {detailModelData.createDate}
              </Description>
              {detailModelData.tbox && (
                <Description term="TBOX编号" style={{ width: '50%' }}>
                  {detailModelData.tbox}
                </Description>
              )}
            </DescriptionList>
          </Card>

          <ReplaceRecordModal
            visible={replaceRecordVisible}
            list={replaceRecord}
            changeVisible={this.handleCloseReplaceRecordModal}
            loading={replaceRecordLoading}
          />
          <VersionHistoryModal
            visible={versionHistoryVisible}
            list={versionHistory}
            changeVisible={this.handleCloseVersionHistoryModal}
            loading={versionHistoryLoading}
          />
        </div>
      </Modal>
    );
  }
}

export default ipdaDetailModal;
